<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!doctype html>
<html>
<head>
	<title>保养提醒Report</title>
	<style>
		.Wdate{width: 80px;padding-left: 10px;}
	</style>
	<script src='<c:url value="/resources/jsLib/echarts.js" />'></script>


	<script type="text/javascript">
		var pageListUrl = "<c:url value="/remind/sms/list" />";

		var detailTbodyTemplateID = "detailTbodyTemplate";
		var detailTbodyID = "detailTbody";
		var pageToolID = "pageTool";

		var editTemplateID = "edit-template";
		var editFormID = "nsForm";
		var searchFormID = "searchForm";


		$(function () {
			refreshSendReport();
			refreshNotSendReport();
		});

//		var g_remind_items = ['轮胎','机油','制动', '轮胎换位'];
		var g_remind_items = [<c:forEach items="${serviceRemindItems}" var="g" varStatus="i">
			${i.index > 0 ? ',':''}'${g}'
		</c:forEach>];
	</script>

</head>


<body  class="list-body">

<div class="content">
	<div class="title fix">
		<h3 class="b f14 fl">保养提醒</h3>
		<div class="btns fr">
			<%--<button class="green" onclick="add()">新增</button>--%>
			<%--<button class="orange">返回</button>--%>
		</div>
	</div>

	<div class="main">
		<div class="inquiry">
			<form id="searchForm">
				<input type="hidden" name="currentPage" value="1">
				<input type="hidden" name="toolStyle" value="pms">
				<input type="hidden" name="limit" value="10">
				<input type="hidden" name="method" value="toPage">
				<input type="hidden" name="dealerNum" value="${dealerNum}">

				<%--<div class="group"><label>建议保养月份：</label><input type="text" name="nextCalcDateParam" value="${currentMonth}" class="Wdate"  onFocus="WdatePicker({dateFmt:'yyyy-MM'})" autocomplete="off" /></div>--%>
				<%--<div class="btns"><button type="button" class="bottleGreen vm" onclick="flushReport()">查看</button></div>--%>
				<%-- <div class="group"><a href='<c:url value="/remind/sms/manage/${dealerNum}" />' >短信余额：<label class="msg-label orange">${smsQuantity}</label></a></div> --%>

			</form>
		</div>
		<div class="table">
			<table width="100%">
				<thead>
				<tr>
					<%--<th width="5%"><input type="checkbox" name="name" value=" " /></th>--%>
					<th width="50%">
						<input type="text" id="notSendMonth" onchange="refreshNotSendReport()" value="${currentMonth}" class="Wdate"  onFocus="WdatePicker({dateFmt:'yyyy-MM', Mchanged: refreshNotSendReport2})" autocomplete="off" />
						待发送
					</th>
					<th width="50%">
						<input type="text" id="sendMonth" onchange="refreshSendReport()" value="${preMonth}" class="Wdate"  onFocus="WdatePicker({dateFmt:'yyyy-MM'})" autocomplete="off" />
						已发送未回店
					</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>
						<div id="box1" style="width:100%;height: 300px;"></div>
						<div><label>未发送总数：</label><span id="pendingToSendSum"></span></div>
					</td>
					<td>
						<div id="box2" style="width:100%;height: 300px;"></div>
						<div><label>已发送总数：</label><span id="sentSum"></span></div>
					</td>
				</tr>
				<tr>
					<td colspan="2"><span class="blue">提示：点击饼图查看保养提醒详情</span></td>
				</tr>
				</tbody>
			</table>
		</div>

	</div>
</div>

<script>

	notSendChart = echarts.init(document.getElementById('box1'));
	sendChart = echarts.init(document.getElementById('box2'));

	notSendChart.on('click', function (params) {
		location = "<c:url value="/remind/service/manage/${dealerNum}" />?send=0&maintenanceItem=" + params.name + "&remindMonth=" + $("#notSendMonth").val();
	});
	sendChart.on('click', function (params) {
		location = "<c:url value="/remind/service/manage/${dealerNum}" />?send=1&maintenanceItem=" + params.name + "&remindMonth=" + $("#sendMonth").val();
	});

    function refreshNotSendReport2(){

//        $("#notSendMonth").val( $dp.cal.newdate);
//        refreshNotSendReport();
    }

	function refreshSendReport(){
		refreshReport(sendChart, '<c:url value="/remind/report/load/send" />', "sendMonth");

	}
	function refreshNotSendReport(){
		refreshReport(notSendChart, '<c:url value="/remind/report/load/notsend" />', "notSendMonth");

	}
	function refreshReport(chart, loadDataUrl, monthInputId){
		chart.showLoading();

			$.ajax({
				type: "GET",
				url: loadDataUrl,
				data: {
					dealerNum: '${dealerNum}',
//					diffDays: $("#" + diffDaysId).val()
					nextCalcDate: $("#" + monthInputId).val()
				},
				dataType: "json",
				async: true,
				cache:false,
				success: function(data){
					var sum= 0;
					chart.hideLoading();
					if (data.success) {
						var chartData = data.data;
						$.each(g_remind_items, function (i, val) {
							var exist = false;
							$.each(chartData, function (i2, val2) {
								if(val2.name == val){
									exist = true;
									sum += val2.value;
								}
							});
							if(!exist){
								chartData.push({value:0, name:val});
							}
						});


						var option2 = {
							x: 150,
							tooltip : {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							legend: {
								orient : 'vertical',
								x : 'left',
								y : 'top',
								data:g_remind_items
							},
							calculable : true,
							series : [
								{
									name:'保养项目',
									type:'pie',
									radius : '55%',
									center: ['55%', '50%'],
									data: chartData,
									itemStyle:{
										normal:{
											label:{
												show: true,
												formatter: '{b} : {c} ({d}%)'
											},
											labelLine :{show:true}
										}
									}

								}
							]
						};
						chart.setOption(option2);
						//console.log(sum);
						if("sendMonth" == monthInputId)
							$("#sentSum").html(sum);
						else
							$("#pendingToSendSum").html(sum);
					} else {
						ns.error(data.message);
					}

				},
				error: function(){
					chart.hideLoading();
					ns.error("操作失败，请重试！");
				}
			});


	}

</script>

</body>
</html>




